<!DOCTYPE html>
<!-- saved from url=(0072)http://www.17sucai.com/preview/1474877/2018-12-14/slideVerify/index.html -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        .verify-wrap {
            width: 350px;
            height: 40px;
            background-color: #e5e5e5;
            border: 1px solid #e0e0e0;
            margin: 5px auto;
            position: relative
        }

        .verify-wrap .drag-btn {
            position: absolute;
            left: -1px;
            top: -1px;
            width: 50px;
            height: 40px;
            background: #fff url(img/next.png) no-repeat center center;
            background-size: 100% 100%;
            z-index: 2;
            cursor: move;
        }

        .verify-wrap .suc-drag-btn {
            background: #fff url(img/next.png) no-repeat center center;
            background-size: 100% 100%
        }

        .verify-wrap .drag-progress {
            position: absolute;
            left: 0;
            top: -1px;
            height: 40px;
            border-top: 1px solid #7ac23c;
            border-top: 1px solid #7ac23c;
            width: 0;
            background-color: #7ac23c;
            color: #fff;
            font-size: 18px;
            text-align: center;
            line-height: 40px
        }

        .verify-wrap .fix-tips,
        .verify-msg {
            width: 100%;
            position: absolute;
            right: 0;
            left: 1px;
            height: 100%;
            color: #51555c;
            z-index: 1;
            line-height: 38px;
            font-size: 12px;
            text-align: center
        }

        .verify-wrap .verify-msg {
            background-color: #7ac23c;
            color: #fff;
            display: none
        }
    </style>

    
</head>

<body style="">

    <!--实例1-->
    <div class="verify-wrap" id="verify-wrap" style="width: 450px;">
        <div class="drag-progress dragProgress" style="width: 0px;"></div><span class="drag-btn dragBtn"
            style="left: -1px;"></span><span class="fix-tips fixTips">请按住滑块，123</span><span
            class="verify-msg sucMsg">验证通过最右边最右边最右边</span>
    </div>


    <div style="text-align: center;">
        <button type="button" id="resetBtn" style="display: inline-block;">重置1</button>
        <button type="button" id="getState" style="display: inline-block;">获取1验证状态</button>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>

    <!--实例2-->
    <div class="verify-wrap" id="verify-wrap2" style="width: 300px;">
        <div class="drag-progress dragProgress" style="width: 0px;"></div><span class="drag-btn dragBtn"
            style="left: -1px;"></span><span class="fix-tips fixTips">请按住滑块</span><span
            class="verify-msg sucMsg">验证通过</span>
    </div>


    <div style="text-align: center;">
        <button type="button" id="resetBtn2" style="display: inline-block;">重置2</button>
        <button type="button" id="getState2" style="display: inline-block;">获取2验证状态</button>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/jq-slideVerify.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            console.log(parseFloat('1px'))

            var SlideVerifyPlug = window.slideVerifyPlug;
            var slideVerify = new SlideVerifyPlug('#verify-wrap', {
                wrapWidth: '450',//设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
                initText: '请按住滑块，123',  //设置  初始的 显示文字
                sucessText: '验证通过最右边最右边最右边',//设置 验证通过 显示的文字
                getSucessState: function (res) {
                    //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了 
                    console.log(res);
                }
            });
            $("#resetBtn").on('click', function () {
                slideVerify.resetVerify();//可以重置 插件 回到初始状态 
            })
            $("#getState").on('click', function () {
                alert(slideVerify.slideFinishState);   //这个可以拿到 当前验证状态  是否完成
            })
            var slideVerify2 = new SlideVerifyPlug('#verify-wrap2', {
                wrapWidth: '300',
                initText: '请按住滑块',
                sucessText: '验证通过',

            });
            $("#resetBtn2").on('click', function () {
                slideVerify2.resetVerify();
            })
            $("#getState2").on('click', function () {
                alert(slideVerify2.slideFinishState);
            })
        })
    </script>

</body>

</html>